<template>
	<div class="page">
		<navbar></navbar>
		<div class="detailinfo">
			<div class="video">
				<video :src="module.content" controls></video>
				<van-collapse v-model="activeNames" :border="false" @change="onChange">
					<div class="videoinfo">
						<van-collapse-item :title="module.name" name="1">
							<template #title>
								<div class="video-title" :class="{ 'title-wrap': titleWrap }">
									<span class="video-type" v-if="module.category">{{ module.category.title }}</span>

									{{ module.name }}
								</div>
								<div class="video-moreinfo">
									<svg class="icon" aria-hidden="true"><use xlink:href="#icon-UPzhu"></use></svg>
									<span class="up">{{ module.userinfo.name }}</span>
									<span class="play-count">2233万观看</span>
									<span class="danmu">1.2万弹幕</span>
									<span class="date">{{ module.date }}</span>
								</div>
							</template>
							<div class="video-collapse">
								我是视频简介啦
								<br />
								是视频简介啦
								<br />
								视频简介啦
								<br />
								简介啦~
							</div>
						</van-collapse-item>
						<div class="video-operation">
							<div class="operation-left">
								<div class="zan" @click="zanSelected = !zanSelected">
									<svg class="icon" aria-hidden="true" v-if="zanSelected" fill="#FB7299"><use xlink:href="#icon-dianzan"></use></svg>
									<svg class="icon" aria-hidden="true" v-else fill="#575757"><use xlink:href="#icon-dianzan"></use></svg>
									点赞
								</div>
								<div class="collection" @click="collectionclick">
									<svg class="icon" aria-hidden="true" v-if="collectionactive" fill="#FB7299"><use xlink:href="#icon-collection-b"></use></svg>
									<svg class="icon" aria-hidden="true" v-else fill="#575757"><use xlink:href="#icon-collection-b"></use></svg>
									收藏
								</div>
								<div class="download" @click="download">
									<svg class="icon" aria-hidden="true" fill="#575757"><use xlink:href="#icon-huancun"></use></svg>
									缓存
								</div>
							</div>
							<div class="operation-right" @click="follow">
								<div v-if="!isFollowed" class="dv_attention">
									<svg class="icon" aria-hidden="true" fill="#FB7299"><use xlink:href="#icon-add"></use></svg>
									关注
								</div>
								<div v-else class="is-followed">已关注</div>
							</div>
						</div>
					</div>
				</van-collapse>
			</div>
		</div>
		<commend :commendlist="commendlist" :userInfo="userInfo"></commend>
	</div>
</template>

<script>
import navbar from '../components/common/Navbar.vue';
import detail from './Detail.vue';
import comment from '../components/article/comment.vue';
import comments from '../components/article/comments.vue';
import commend from '../components/article/commend.vue';

export default {
	data() {
		return {
			module: { userinfo: { name: '' } },
			activeNames: ['111', '222', '333'],
			commendlist: null,
			title: '',
			lens: null,
			postcom: {
				comment_content: '',
				comment_date: '',
				parent_id: null,
				article_id: null
			},
			collectionactive: null,
			titleWrap: true,
			zanSelected: false,
			isFollowed: false,
			active: [],
			commendData: undefined,
			userInfo: null
		};
	},
	methods: {
		// 获取视频地址，标题，分类信息，作者
		async articleitemData() {
			const res = await this.$http.get('/article/' + this.$route.params.id);
			// console.log(res)
			this.module = res.data[0];
			this.title = res.data[0].category.title;
			this.initFollow();
		},
		// 获取相关推荐的视频信息
		async commenddata() {
			const res = await this.$http.get('/commend');
			console.log(res);
			this.commendlist = res.data;
		},
		// 发表评论
		async postsuccess(res) {
			console.log(res);
			const date = new Date();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			if (m < 10) {
				m = '0' + m;
			}
			if (d < 10) {
				d = '0' + d;
			}
			let str = `${m}-${d}`;
			console.log(str);
			this.postcom.comment_content = res;
			this.postcom.comment_date = str;
			this.postcom.article_id = this.$route.params.id;
			// console.log(this.postcom)
			const result = await this.$http.post('/comment_post/' + localStorage.getItem('id'), this.postcom);
			// console.log(result)
			this.$refs.commentpublish.commentData();
			this.postcom.parent_id = null;
			if (result.status == 200) {
				this.$msg('发表成功');
			}
		},
		// 点击回复时，自动聚焦到input框
		postchildclick(id) {
			console.log(id);
			// 先到赋值parent_id，再聚焦
			this.postcom.parent_id = id;
			this.$refs.commentIpt.focusIpt();
		},
		async collectionclick() {
			// 收藏
			if (localStorage.getItem('token')) {
				const res = await this.$http.post('/collection/' + localStorage.getItem('id'), { article_id: this.$route.params.id });
				if (res.data.msg == '收藏成功') {
					this.collectionactive = true;
				} else {
					this.collectionactive = false;
				}
			}
		},
		// 进入页面获取是否收藏
		async collectioninit() {
			if (localStorage.getItem('token')) {
				const res = await this.$http.get('/collection/' + localStorage.getItem('id'), { params: { article_id: this.$route.params.id } });
				console.log(res);
				this.collectionactive = res.data.success;
			}
		},
		// 切换面板时触发
		onChange() {
			this.titleWrap = !this.titleWrap;
		},
		// 缓存
		download() {
			window.open(this.module.content);
		},
		// 关注
		async follow() {
			if (!localStorage.getItem('token')) {
				this.$msg.fail('请先登录');
				return;
			}
			this.isFollowed = !this.isFollowed;
			const res = await this.$http.post('/sub_scription/' + localStorage.getItem('id'), {
				sub_id: this.module.userid
			});
			// console.log(res);
			if (res.data.msg === '关注成功') {
				this.isFollowed = true;
			} else if (res.data.msg === '取消关注成功') {
				this.isFollowed = false;
			}
		},
		// 进入页面获取是否关注（使用了data，要注意时机，生命周期）
		async initFollow() {
			// console.log(this.videoData);
			const res = await this.$http.get('/sub_scription/' + localStorage.getItem('id'), {
				params: {
					// 使用了data，要注意时机
					sub_id: this.module.userid
				}
			});
			// console.log(res);
			if (res.data.success === false) {
				this.isFollowed = false;
			} else if (res.data.success === true) {
				this.isFollowed = true;
			}
		},
		// 获取个人用户信息
		async getUserInfo() {
			const res = await this.$http.get('/user/' + localStorage.getItem('id'));
			console.log(res);
			this.userInfo = res.data[0];
		}
	},
	components: {
		navbar,
		detail,
		comment,
		comments,
		commend
	},
	created() {
		this.articleitemData();
		this.commenddata();
		// this.collectioninit()
		// this.getRecommend()
		if (localStorage.getItem('token') && localStorage.getItem('id')) {
			this.getUserInfo();
			this.collectioninit();
			// this.initFollow()
		}
	},
	watch: {
		$route() {
			// 当路由发生变化
			this.articleitemData();
			this.commenddata();
			this.collectioninit();
		}
	}
};
</script>

<style lang="less">
// @import "../assets/iconStyle.scss";
// @import '../assets/iconfont.css'

.page {
	background-color: white;
}
.detailinfo {
	// width: 100%;
	.video {
		width: 100%;
	}
	video {
		width: 100%;
	}
}
.detailparents {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	.detailitem {
		width: 45%;
		margin: 5px 0;
	}
}
.activecolor {
	color: #fb739a;
}
.svgs {
	color: #fb739a;
	// background-color: #FB739A;
}
.title-wrap {
	white-space: nowrap;
	overflow: hidden;
	margin-bottom: -0.833vw;
}
// 下拉列表
.videoinfo {
	margin-bottom: 10px;
	// border: 1px solid red;
	.video-title {
		font-size: 4.26667vw;
		font-weight: 400;
		display: inline-block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #212121;
		text-overflow: ellipsis;
		margin-bottom: 1vw;
		width: 86.66667vw;
		height: 6.4vw;
		line-height: 6.4vw;
		&.title-wrap {
			white-space: nowrap;
			overflow: hidden;
			margin-bottom: -0.833vw;
		}
		.video-type {
			background: #f4f4f4;
			padding: 1vw 1.6vw 0.6vw 1.6vw;
			font-size: 3.2vw;
			height: 5vw;
			line-height: 5vw;
			color: #fb7299;
			border-radius: 3vw;
		}
	}
	.video-moreinfo {
		line-height: 4.444vw;
		font-size: 3.2vw;

		.icon {
			width: 4.444vw;
			height: 4.444vw;
			vertical-align: middle;
			margin-top: -0.756vw;
			margin-right: 1.111vw;
		}
		.up {
			color: #212121;
			margin-right: 3vw;
		}
		.play-count {
			color: #999;
			margin-right: 3vw;
		}
		.danmu {
			color: #999;
			margin-right: 3vw;
		}
		.date {
			color: #999;
			margin-right: 3vw;
		}
	}
	.video-collapse {
		font-size: 3.2vw;
		line-height: 4.8vw;
		color: #999;
		padding-top: 1.33333vw;
		white-space: pre-wrap;
	}
}
.video-operation {
	// border: 1px solid red;
	padding: 2.778vw 4.444vw;
	font-size: 3.5vw;
	display: flex;
	justify-content: space-between;
	.operation-left {
		// border: 1px solid red;
		display: flex;
		width: 60vw;
		justify-content: space-between;
		.icon {
			width: 20px;
			//   border: 1px solid red;
			height: 20px;
			vertical-align: middle;
			margin-top: -5px;
			color: red;
		}
	}
	.operation-right {
		// border: 1px solid red;
		width: 55px;
		height: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fb7299;
		margin-top: 2px;
		.icon {
			margin-top: 1px;
			margin-right: 1px;
		}
		.is-followed {
			color: #999;
		}
	}
}
.icon {
	width: 20px;
	// border: 1px solid red;
	height: 20px;
	vertical-align: middle;
	margin-top: -5px;
	color: red;
}
.dv_attention {
	margin-top: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
